<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用jQuery的each和hasClass等方法设计折叠与展开网页内容的特效</title>

<link href="css/base.css" type="text/css" rel="stylesheet" />

<style type="text/css">

.w {
	margin: 5px auto; width: 990px
}

.left {
	float: left; width: 211px
}

#refilter {
	width: 207px;
	border: 2px solid #ddd;
}

#refilter .mt {
	background-position: 0px -97px; padding-left: 8px; line-height: 34px; background-repeat: repeat-x; height: 36px; background-color: #f5f5f5
}

#refilter .mt h2 {
	font-size: 14px; color: #c80202
}

#refilter .mt h2 a {
	font-size: 14px; color: #c80202
}

#refilter .mc {
	width: 207px
}

#refilter .item {
	background: #fff; position: relative
}

#refilter .item h3 {
	border-top: #ccc 1px dotted;
	background: #fafafa;
	overflow: hidden;
	cursor: pointer;
	line-height: 24px;
	height: 24px;
	padding: 3px 6px 3px 36px;
}

#refilter .fore h3 {
	border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none
}

#refilter .item b {
	background: url(images/search2012052301.jpg) no-repeat
}

#refilter .item b {
	background-position: -78px -339px;
	margin-top: 1px;
	left: 10px;
	overflow: hidden;
	width: 16px;
	cursor: pointer;
	position: absolute;
	top: 7px;
	height: 16px
}

#refilter .item ul {
	border-top: 1px dotted #ccc;
	display: none;
	overflow: hidden;
	zoom: 1;
	padding: 4px 0px 4px 18px;
}

#refilter .item li {
	padding-right: 4px; padding-left: 0px; padding-bottom: 0px; overflow: hidden; padding-top: 0px; height: 24px
}
#refilter .item span {
	font-weight: normal; font-size: 13px; color: #999; font-family: arial
}

#refilter .item li s {
	background-position: -33px -339px; display: inline-block; font-size: 0px; vertical-align: middle; overflow: hidden; width: 13px; line-height: 0; margin-right: 5px; height: 24px
}

#refilter .item li s.tree-last {
	background-position: -47px -339px
}

#refilter .item li a {
	padding-right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 0px
}

#refilter .item li a:hover {
	background: #4598d2; color: #fff; text-decoration: none
}

#refilter .item li a:hover span {
	color: #fff
}

#refilter .item .curr a:link {
	padding-right: 2px; display: inline-block; padding-left: 2px; background: #4598d2; padding-bottom: 2px; vertical-align: middle; color: #fff; padding-top: 0px; height: 15px
}

#refilter .item .curr a:visited {
	padding-right: 2px; display: inline-block; padding-left: 2px; background: #4598d2; padding-bottom: 2px; vertical-align: middle; color: #fff; padding-top: 0px; height: 15px
}

#refilter .item .curr a:hover {
	text-decoration: none
}
#refilter .item .curr span {
	color: #fff
}

#refilter .hover b {
	background-position: -61px -339px
}

#refilter .hover ul {
	display: block
}
</style>
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
</head>

<body>
<div class="w main">
  <div class="left">
    <div class="m" id="refilter">
      <div class="mt">
        <h2>所有类目</h2>
      </div>
      <div class="mc">
        <div class="item fore hover">
          <h3><b></b>图书<span>(28)</span></h3>
          <ul>
              <li><s></s>教材教辅 <span>(19)</span></li>
              <li><s></s>计算机与互联网 <span>(6)</span></li>
              <li><s class="tree-last"></s>艺术 <span>(1)</span></li>
           </ul>
        </div>
        <div class="item">
          <h3><b></b>电子书<span>(1)</span></h3>
          <ul>
            <li><s class="tree-last"></s>教材教辅 <span>(1)</span></li>
          </ul>
        </div>
      </div>
      </div>
  </div>
</div>

<script type="text/javascript">
$("#refilter .item h3").each(function() {
	$(this).click(function() {
		var e = $(this).parent();
		if (e.hasClass("hover")) {
			e.removeClass("hover")
		} else {
			e.addClass("hover")
		}
	})
});
</script>
</body>
</html>
